<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title data-localize="sort.title">分选机</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
p{
	margin: 0;
}
.u-line{
	margin: 0 auto;
	width: 1758px;
    height: 600px;
    overflow: hidden;
}
.u-road{
	position: relative;
	height: 200px;
	width: 1730px;
	float: left;
	margin-top: 360px;
	-webkit-transform: rotateY(180deg);
}
.u-road p{
	-webkit-transform: rotateY(180deg);
}
.u-road span{
	display: inline-block;
	-webkit-transform: rotateY(180deg);
}
.u-road-opposite{
	position: relative;
	height: 200px;
	width: 770px;
	float: left;
	margin-top: 110px;
	-webkit-transform: rotateY(180deg);
}
.u-roadcon{
	position: relative;
	float: left;
}
.u-roadcon:after{
	content: '';
	display: block;
	clear: both;
}
.u-road:after{
	content: '';
	display: block;
	clear: both;
}
.u-road-opposite:after{
	content: '';
	display: block;
	clear: both;
}
.u-track{
	position: absolute;
	height: 28px;
	width: 100%;
	left: 0;
	top: 85px;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
}
.u-outtrack{
	position: absolute;
	height: 52px;
	width: 28px;
	left: 550px;
	top: 33px;
	border-left: 1px solid #cecece;
	border-right: 1px solid #cecece;
}
.u-boxcon {
	position: relative;
	float: left;
	width: 68px;
	height: 68px;
	margin: 65px 0 65px 50px;
	background: #bdcee2;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 12;
}
.u-box{
	position: absolute;
	left: 0px;
	top: 0px;
    width: 68px;
    height: 68px;
    border-radius: 4px;
    z-index: 13;
}
.u-boxcon p,.u-boxfade p{
	margin: 0;
	padding: 0;
	position: absolute;
	top: -20px;
	line-height: 20px;
	font-size: 14px;
	color: #484848;
	width: 69px;
	text-align: center;
}

.u-feedbox p{
	margin: 0;
	text-align: center;
	font-size: 16px;
	line-height: 68px;
}
.u-hand{
	position: absolute;
	width: 24px;
	height: 24px;
	top: -10px;
	left: -10px;
	border-radius: 50%; 
	background: #9acfe1;
	border: 1px solid #eee;
	z-index: -1;
}
.u-hand:after{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 auto;
	margin-top: 6px;
	border-radius: 6px; 
	background: #66bfdd;
}
.u-handbar{
	position: relative;
	float: left;
	width: 6px;
	height: 6px;
	margin-top: 31px;
	margin-left: 31px;
	border-radius: 4px; 
	background: #66bfdd;
	opacity: 0;
}
/*animations*/
.moveup{
	-webkit-animation: moveup 1.3s linear infinite;
}
@-webkit-keyframes moveup {
0%{
	-webkit-transform: translateY(0);
	opacity: 1;
}
10%{
	-webkit-transform: translateY(0);
	opacity: 1;
}
20%{
	-webkit-transform: translateY(-100px);
	opacity: 1;
}
31%{
	-webkit-transform: translateY(-100px);
	opacity: 0;
}
50%{
	-webkit-transform: translateY(0);
	opacity: 0;
}
100%{
	-webkit-transform: translateY(0);
	opacity: 0;
}
}

.opposite{
	-webkit-transform: rotateY(180deg);
}
.u-road.opposite{
	float: right;
}
.opposite p{
	-webkit-transform: rotateY(180deg);
}
.u-adjust{
	position: absolute;
	right: 50px;
	width: 71px;
	height: 20px;
}
.u-fans{
	float: left;
	margin-top: 10px;
}
.u-fans:nth-child(1){
	margin-left: 7.5px;
	margin-right: 65px;
}
.u-fans:nth-child(2){
	margin-right: 65px;
}
.u-sort{
	position: absolute;
	left: 170px;
	bottom: 145px;
	width: 1440px;
	height: 270px;
}
.u-sort .u-sibox{
	position: relative;
	float: left;
	width: 70px;
	height: 70px;
	margin: 10px 50px 10px 0;
	background: #bdcee2;
}
.u-sort .u-label{
	position: absolute;
	width: 100%;
	text-align: center;
	top: -20px;
	line-height: 20px;
}
.drop2{
	-webkit-animation: dropB 0.3s linear infinite;
	-webkit-animation-delay: 0.3s;
}
@-webkit-keyframes dropB {
0%{
	opacity: 1;
	-webkit-transform:rotateZ(180deg) translateY(0);
	height: 6px;
}
30%{
	-webkit-transform:rotateZ(180deg) translateY(0);
	height: 196px;
}
70%{
	-webkit-transform:rotateZ(180deg) translateY(0);
	height: 6px;
}
100%{
	-webkit-transform:rotateZ(180deg) translateY(0);
	opacity: 0;
	height: 6px;
}
}
.drop3{
	-webkit-animation: dropC 0.3s linear infinite;
	-webkit-animation-delay: 0.3s;
}
@-webkit-keyframes dropC {
0%{
	opacity: 1;
	-webkit-transform:rotateZ(180deg) translateY(0);
	height: 6px;
}
30%{
	-webkit-transform:rotateZ(180deg) translateY(0);
	height: 286px;
}
70%{
	-webkit-transform:rotateZ(180deg) translateY(0);
	height: 6px;
}
100%{
	-webkit-transform:rotateZ(180deg) translateY(0);
	opacity: 0;
	height: 6px;
}
}
.movedown1{
	-webkit-animation: movedowna 1.3s ease infinite;
}
@-webkit-keyframes movedowna {
0%{
	-webkit-transform: translateY(0);
	opacity: 1;
}
100%{
	-webkit-transform: translateY(-90px);
	opacity: 1;
}
}
.movedown2{
	-webkit-animation: movedownb 1.3s ease infinite;
}
@-webkit-keyframes movedownb {
0%{
	-webkit-transform: translateY(0);
	opacity: 1;
}
100%{
	-webkit-transform: translateY(-180px);
	opacity: 1;
}
}
.movedown3{
	-webkit-animation: movedownc 1.3s ease infinite;
}
@-webkit-keyframes movedownc {
0%{
	-webkit-transform: translateY(0);
	opacity: 1;
}
100%{
	-webkit-transform: translateY(-270px);
	opacity: 1;
}
}
.u-boxfade{
	position: absolute;
	top: 65px;
    width: 70px;
    height: 70px;
    background: url('image/print3.png') no-repeat 0 0;
	background-size: 100% 100%;
    border-radius: 4px;
    z-index: 11;
    display: none;
}
.u-boxfade2{
	right: 170px;
}
.u-boxfade3{
	right: 290px;
}
.u-boxfade4{
	right: 410px;
}
.u-boxfade5{
	right: 530px;
}
.u-boxfade6{
	right: 650px;
}
.u-boxfade7{
	right: 770px;
}
.u-boxfade8{
	right: 890px;
}
.u-boxfade9{
	right: 1010px;
}
.u-boxfade10{
	right: 1130px;
}
.u-boxfade11{
	right: 1250px;
}
.u-boxfade12{
	right: 1370px;
}
.u-boxfade13{
	right: 1490px;
}

</style>
<link rel="stylesheet" type="text/css" href="css/machine.css">
</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="back">回到首页</div></a>
	<h3 data-localize="sort.title">分选机</h3>
	<div class="changeLang">
		<p class="u-lang"><span>中文</span><span>English</span></p>
	    <div isopen="true" class="changeLangBtn"></div>
	</div>
</div>
</div>
<div class="u-infos">
	<h2 data-localize="sort.info_title">状态区域</h2>
	<div class="u-errorlist">
		<h3 data-localize="yichang">异常一览：</h3>
		<div class="u-errorlistcon">
		</div>
	</div>
	<p class="status"><span data-localize="sort.running">运行状态：</span><span class="u-cube t-status"></span></p>
</div>
<div class="t-con">
<div class="u-line">
	<div class="u-road">
		<div class="u-boxcon needleft stop u-boxconspe" id="u-boxe"><div class="u-box u-boxe"></div></div>
		<div class="u-adjust u-adjusttop"><img src="image/adjust.png" width="100%"></div>
		<div class="u-adjust u-adjustbottom"><img src="image/adjust.png" width="100%"></div>
		<div class="u-track"></div>
		<div class="u-boxfade u-boxfade2" id="u-boxfade2"></div>
		<div class="u-boxfade u-boxfade3" id="u-boxfade3"></div>
		<div class="u-boxfade u-boxfade4" id="u-boxfade4"></div>
		<div class="u-boxfade u-boxfade5" id="u-boxfade5"></div>
		<div class="u-boxfade u-boxfade6" id="u-boxfade6"></div>
		<div class="u-boxfade u-boxfade7" id="u-boxfade7"></div>
		<div class="u-boxfade u-boxfade8" id="u-boxfade8"></div>
		<div class="u-boxfade u-boxfade9" id="u-boxfade9"></div>
		<div class="u-boxfade u-boxfade10" id="u-boxfade10"></div>
		<div class="u-boxfade u-boxfade11" id="u-boxfade11"></div>
		<div class="u-boxfade u-boxfade12" id="u-boxfade12"></div>
		<div class="u-boxfade u-boxfade13" id="u-boxfade13"></div>
		<div class="u-boxcon stop"><div class="u-box u-box14" id="u-box14"><p></p></div><div class="u-handbar u-handbar14" id="u-handbar14"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box13" id="u-box13"><p></p></div><div class="u-handbar u-handbar13" id="u-handbar13"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box12" id="u-box12"><p></p></div><div class="u-handbar u-handbar12" id="u-handbar12"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box11" id="u-box11"><p></p></div><div class="u-handbar u-handbar11" id="u-handbar11"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box10" id="u-box10"><p></p></div><div class="u-handbar u-handbar10" id="u-handbar10"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box9" id="u-box9"><p></p></div><div class="u-handbar u-handbar9" id="u-handbar9"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box8" id="u-box8"><p></p></div><div class="u-handbar u-handbar8" id="u-handbar8"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box7" id="u-box7"><p></p></div><div class="u-handbar u-handbar7" id="u-handbar7"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box6" id="u-box6"><p></p></div><div class="u-handbar u-handbar6" id="u-handbar6"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop">
			<div class="u-box u-box5" id="u-box5"><p></p></div>
			<div class="u-handbar u-handbar5" id="u-handbar5"><div class="u-hand"></div></div>
		</div>
		<div class="u-boxcon stop"><div class="u-box u-box4" id="u-box4"><p></p></div><div class="u-handbar u-handbar4" id="u-handbar4"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop">
			<div class="u-box u-box3" id="u-box3"><p></p></div>
			<div class="u-handbar u-handbar3" id="u-handbar3"><div class="u-hand"></div></div>
		</div>
		<div class="u-boxcon stop"><div class="u-box u-box2" id="u-box2"><p></p></div><div class="u-handbar u-handbar2" id="u-handbar2"><div class="u-hand"></div></div></div>
		<div class="u-boxcon stop"><div class="u-box u-box1" id="u-box1"><p></p></div><div class="u-handbar u-handbar1" id="u-handbar1"><div class="u-hand"></div></div></div>
		<div class="u-sort">
			<div class="u-sibox u-sibox36">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox33">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox30">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox27">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox24">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox21">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox18">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox15">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox12">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox9">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox6">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox3">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox35">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox32">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox29">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox26">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox23">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox20">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox17">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox14">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox11">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox8">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox5">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox2">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox34">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox31">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox28">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox25">
				<p class="u-label"></p>
				<div class="circle">
					<div class="pie_left"><div class="circle_left"></div></div>
					<div class="pie_right"><div class="circle_right"></div></div>
					<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox22">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox19">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox16">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox13">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox10">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox7">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox4">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
			<div class="u-sibox u-sibox1">
				<p class="u-label"></p>
				<div class="circle">
				<div class="pie_left"><div class="circle_left"></div></div>
				<div class="pie_right"><div class="circle_right"></div></div>
				<div class="mask"><span class="cachenum">0</span></div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.localize.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/language_cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var lastData = null,
	a=[],
	isFirst = true;
var url = getUrl("sort");
var request = new GetRequest();
var showval= request.type; 
if ('WebSocket' in window) {
    websocket = new WebSocket(url+'/'+request.line+'/'+request.index);
}else {
    alert('Not support websocket')
}
websocket.onerror = function () {
    $('.u-boxcon,.u-adjust').addClass('stop');
    $('.u-handbar').addClass('stop');
};

websocket.onopen = function (event) {
    $('.u-boxcon,.u-adjust').removeClass('stop');
}

function addanimate(obj){
    for (var i = 0; i < obj.length; i++) {
       (function(i){
            if (obj[i].isPause == 0){
            	$('.u-box'+obj[i].stack_index).parent().addClass('moveleft');
            }
            switch (obj[i].isCache) 
			{ 
			  case 0:
			  	
			  	break; 
			  case 1:
			  	$('.u-box'+obj[i].stack_index).hide();
			  	$('.u-boxfade'+obj[i].stack_index).show().addClass('movedown1');
			  	break; 
			  case 2:
			  	$('.u-box'+obj[i].stack_index).hide();
			  	$('.u-boxfade'+obj[i].stack_index).show().addClass('movedown2');
			  	break; 
			  case 3:
			  	$('.u-box'+obj[i].stack_index).hide();
			  	$('.u-boxfade'+obj[i].stack_index).show().addClass('movedown3'); 
			  	break;
			  default:

			}
       })(i); 
    }
}
function drawCircle(obj,max,val){
    var num = (val/max)*100 * 3.6;
    if (num<=180) {
        obj.find('.circle_right').css('-webkit-transform', "rotate(" + num + "deg)");
    } else if(num>=360){
        obj.find('.circle_right').css('-webkit-transform', "rotate(180deg)");
        obj.find('.circle_left').css('-webkit-transform', "rotate(180deg)");
    }  else {
        obj.find('.circle_right').css('-webkit-transform', "rotate(180deg)");
        obj.find('.circle_left').css('-webkit-transform', "rotate(" + (num - 180) + "deg)");
    };
    obj.find('.cachenum').html(val);
    //console.log(num);
    if (num >= 360) {
        obj.find('.cachenum').css("color","#f00");
        obj.find('.circle').css("background","#f00");
    }else{
        obj.find('.cachenum').css("color","#29abe2");
        obj.find('.circle').css("background","#29abe2");
    }
}
websocket.onmessage = function (event) {
	$('.u-box').show();
    si = JSON.parse(event.data.replace(/\bNaN\b/g, "null"));
    if (!lastData) {
    	lastData = si;
    }
    changeColor($('.t-status'),si.p2);
	for (var i = 0; i < si.box_list.length; i++) {
	   (function(i){
	   		$('.u-sibox'+si.box_list[i].box_id).find('.u-label').html(si.box_list[i].label);
	   		drawCircle($('.u-sibox'+si.box_list[i].box_id),si.box_list[i].setting_qty,si.box_list[i].current_qty);
	   })(i); 
	}
	//si.stack_list[2].silicon_id = 3;
	//si.stack_list[3].isCache = 3;
	if (isFirst) {
    	count(si.stack_list);
		isFirst = false;
    }
    //si.isPause1 = 0;
	if (si.isPause1 == 0) {
    	$('.u-adjusttop').addClass('u-adjustup');
    	$('.u-adjustbottom').addClass('u-adjustdown');
    }else if (si.isPause1 == 1) {
    	$('.u-adjusttop').removeClass('u-adjustup');
    	$('.u-adjustbottom').removeClass('u-adjustdown');
    }
	console.log(si);
	$('#u-boxe').addClass('moveleft');
	errorRender();
	addanimate(si.stack_list);
	//$('.u-boxcon').addClass('moveleft');
    lastData = si;
    //$('.u-boxcon').addClass('moveleft');
    //count(si.stack_list);
}

document.getElementById('u-boxe').addEventListener("webkitAnimationIteration", function(){
	reset();
	count(si.stack_list);
    $('.u-boxcon').removeClass('moveleft');
}, false);

document.getElementById('u-boxfade2').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade2').removeClass('movedown1');
    $('.u-boxfade2').removeClass('movedown2');
    $('.u-boxfade2').removeClass('movedown3');
    $('.u-boxfade2').hide();
}, false);
document.getElementById('u-boxfade3').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade3').removeClass('movedown1');
    $('.u-boxfade3').removeClass('movedown2');
    $('.u-boxfade3').removeClass('movedown3');
    $('.u-boxfade3').hide();
}, false);
document.getElementById('u-boxfade4').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade4').removeClass('movedown1');
    $('.u-boxfade4').removeClass('movedown2');
    $('.u-boxfade4').removeClass('movedown3');
    $('.u-boxfade4').hide();
}, false);
document.getElementById('u-boxfade5').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade5').removeClass('movedown1');
    $('.u-boxfade5').removeClass('movedown2');
    $('.u-boxfade5').removeClass('movedown3');
    $('.u-boxfade5').hide();
}, false);

document.getElementById('u-boxfade6').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade6').removeClass('movedown1');
    $('.u-boxfade6').removeClass('movedown2');
    $('.u-boxfade6').removeClass('movedown3');
    $('.u-boxfade6').hide();
}, false);
document.getElementById('u-boxfade7').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade7').removeClass('movedown1');
    $('.u-boxfade7').removeClass('movedown2');
    $('.u-boxfade7').removeClass('movedown3');
    $('.u-boxfade7').hide();
}, false);
document.getElementById('u-boxfade8').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade8').removeClass('movedown1');
    $('.u-boxfade8').removeClass('movedown2');
    $('.u-boxfade8').removeClass('movedown3');
    $('.u-boxfade8').hide();
}, false);
document.getElementById('u-boxfade9').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade9').removeClass('movedown1');
    $('.u-boxfade9').removeClass('movedown2');
    $('.u-boxfade9').removeClass('movedown3');
    $('.u-boxfade9').hide();
}, false);

document.getElementById('u-boxfade10').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade10').removeClass('movedown1');
    $('.u-boxfade10').removeClass('movedown2');
    $('.u-boxfade10').removeClass('movedown3');
    $('.u-boxfade10').hide();
}, false);
document.getElementById('u-boxfade11').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade11').removeClass('movedown1');
    $('.u-boxfade11').removeClass('movedown2');
    $('.u-boxfade11').removeClass('movedown3');
    $('.u-boxfade11').hide();
}, false);
document.getElementById('u-boxfade12').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade12').removeClass('movedown1');
    $('.u-boxfade12').removeClass('movedown2');
    $('.u-boxfade12').removeClass('movedown3');
    $('.u-boxfade12').hide();
}, false);
document.getElementById('u-boxfade13').addEventListener("webkitAnimationIteration", function(){
    $('.u-boxfade13').removeClass('movedown1');
    $('.u-boxfade13').removeClass('movedown2');
    $('.u-boxfade13').removeClass('movedown3');
    $('.u-boxfade13').hide();
}, false);



window.onbeforeunload = function(){
	websocket.close();
}           
</script>
</body>
</html>